<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DemoGrid</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jqueryUI/1.10.3/themes/smoothness/jquery-ui-1.10.3.custom.min.css"/>

    <style type="text/css">
        /*html, body {*/
            /*margin: 0;*/
            /*padding: 0;*/
            /*font-size: 75%;*/
        /*}*/
    </style>

    <script src="js/lib/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/lib/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="js/lib/jqgrid/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/lib/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: "",
                datatype: "xml",
                mtype: "GET",
                colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],
                colModel: [
                    {name: "invid", width: 55},
                    {name: "invdate", width: 90},
                    {name: "amount", width: 80, align: "right"},
                    {name: "tax", width: 80, align: "right"},
                    {name: "total", width: 80, align: "right"},
                    {name: "note", width: 150, sortable: false}
                ],
                pager: "#pager",
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: "invid",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
                caption: "My first grid"
            });
        });
    </script>

</head>
<body>
<table id="list">
    <tr>
        <td></td>
    </tr>
</table>
<div id="pager"></div>
</body>
</html>